<template>
    <van-sticky :offset-top="0">
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            
            <van-card v-for="i in list" :price="i.goods_price
                " :title="i.goods_name"
                :thumb="i.goods_big_logo ? i.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
        </van-list>
    </van-pull-refresh>

</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let router = useRouter()
let route = useRoute()
const onClickLeft = () => router.go(-1);
import { lb } from '@/api/api';
import { showToast } from 'vant';
let num = reactive({
    pagenum: 1,
    pagesize: 7,
})
let total = ref(0)
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
        num.pagenum = 1;
        total.value = 0
    }
    let max = Math.ceil(total.value / num.pagesize)
    if (max = 0) {
        showToast('初始化')
    } else {
        showToast('加载下一页')
        loading.value = true
        finished.value = false
        if (num.pagenum < max) {
            num.pagenum++
        } else {
            lb({
                cid: route.params.id,
                ...num
            }).then(res => {
                console.log('列表', res)
                list.value = list.value.concat(res.data.message.goods)
                loading.value = false
                total.value = res.data.message.total
            })
        }
    }


};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};
</script>

<style lang="scss" scoped></style>